<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包</title>
</head>
<body>
    <h1>闭包</h1>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>

    //1
    <button id="btn">div内容</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    function hello(name){
        let city='长沙';
        return{
            getms:function(){
                let age=18;
                //内部可以使用外部的资源
                console.log("我叫"+name+city);
                console.log("年龄"+age);
            }
        }
    }
    var ms=hello("temo");
    ms.getms()

    function counter(name){ 
        var x=1;
        return function(){
            x++;
            console.log(name+"="+x);
        }
    }
    let ret=counter("Mr_xiao");
    ret();  //2
    ret();  //3
    let dm=counter("小朋友");   //---互不影响
    dm();   //2
    ret();  //4
    //闭包的难点
    function test(){
        var arr=[];//数组
        for(var i=0;i<5;i++){
            arr[i]=function(){
                return i;
            }
        }
        return arr;
    }
    var p=test();
    console.log(p[0]()) //5
    console.log(p[1]()) //5
    console.log(p[2]()) //5
    //解决 
    var helper=function(x){ 
        return function(){
            alert(x)
            return x;
        }
    }
    var btn=document.querySelectorAll("button");
    for(var i=0;i<3;i++){
        /*
        btn[i].onclick=function(){
            alert(i);   //都是3
        }
        */
       btn[i].onclick=helper(i);
    }

    var Person=function(na){
    //    this.name=na;
    var name=na;
    return{
        getName:function(){
            return name;
        },
        setName:function(nam){
            name=nam;
        }
    };    
    }
    var tm=new Person("temo");
    console.log(tm.name);//直接访问--->相当于public(不安全)
    console.log(tm.getName())//get访问--->相当于private私有属性-->闭包封装    temo
    tm.setName("小丑")
    console.log(tm.getName())//小丑




    //HomeWork
    /*
    1、页面上创建10个DIV和一个按钮，
    当点击按钮时给每个DIV添加文本内容：这是第x个DIV（要求用循环实现，注意闭包问题）
2、创建一个Car类，包含车牌号码和颜色属性，
通过闭包实现类似于JAVA中的封装属性的功能（即只能通过getter和setter方法访问到车牌号码和颜色）
3、(面试题)定义一个函数repeat;function repeat(func,nums,times){}    
//调用方法  var a=repeat(alert,6,3000)  a("你好")   alert六次"你好" 每次间隔3秒
4、(递归练习)// 模拟递归C盘所有文件
  var root ={
    name:'C盘',
    children:[{
        name:'学习',
        children:[{
            name:'电子书',
            children:[
                {
                    name:'文学',
                    children:[
                        {name:'三体'},
                        {name:'红与黑'}
                    ]
                }
            ]
           }
        ]
    },{
        name:'电影',
        children:[
            {name:'美国电影'},
            {name:'日本电影'}
        ]
    }]
  }
    */
   //1
    var btn=document.querySelector("#btn");
    btn.onclick=function(){
    var div=document.querySelectorAll("div");
        for(var i=0;i<10;i++){
            div[i].innerHTML="这是第"+i+"个div";
        }
    }
    //2
    var Car=function(num,ys){
        var number=num;
        var color=ys;
        return{
                getNumber:function(){
                    return number;
                },
                setNumber:function(shu){
                    number=shu;
                },
                getColor:function(){
                    return  color;
                },
                setColor:function(col){
                    color=col;
                }
        };
    }
    var car1=new Car("赣D88888","red");
    console.log(car1.getNumber());
    console.log(car1.getColor());
    car1.setNumber("赣D12313");
    car1.setColor("blue");
    console.log(car1.getNumber());
    console.log(car1.getColor());
    //3
    function repeat(func,nums,times){
        return function(t){
            var count=1;
            var xh=setInterval(function(){
                if(count==nums){
                    clearInterval(xh);
                }
                func(t);
                count++;
            },times)
        }
    }
    var a=repeat(alert,6,3000);
    a("你好")
    //模拟递归C盘所有文件
    var root={
        name:'C盘',
        children:[{
            name:'学习',
            children:[{
                name:'电子书',
                children:[
                    {
                        name:'文学',
                        children:[
                            {name:'三体'},{name:'红与黑'}
                        ]
                    }
                ]
            }
            ]
        },
        {
            name:'电影',
            children:[
                {name:'美国电影',children:[{name:'变形金刚'}]},
                {name:'中国电影',children:[{name:'长津湖'},{name:'斗罗大陆'}]}
            ]
        }]
    }
    //4
    function getAllJson(jsons, name, sign) {
    if(name == "" || name == undefined) {
        name = "json"
    }
    for(key in jsons) {
        var k = name + sign + key;
        if(!(jsons[key] instanceof Object)){
            console.log(k + " = " + jsons[key]); //如果不是Object则打印键值
        }else{
            getAllJson(jsons[key], k, sign); //如果是Object则递归
        } 
    }
};
//调用
getAllJson(root, "", ">");
</script>
</html>